<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Unit Test: savvy</title>
    <script type="text/javascript" src="../scripts/dd/dd.js"></script>
    <script type="text/javascript">
    dd({
        modules:[
            "control",
            "savvy"
        ]
    }).event({
        load:function()
        {
            dd(dd.body).empty();
            var editor = dd(dd.body).addElement("div", {"class":"editor"});
            var text = dd(editor).addElement("textarea");
            dd(text).value =  "@author Templarian\n";
            dd(text).value += "@linkGoogle http://google.com/ Google.com\n";
            dd(text).value += "@gif http://kirupa.templarian.com/fab.gif\n\n";
            dd(text).value +=  "h1. Header 1\n\n";
            dd(text).value += "p. Paragraph *bold _bold italic* italic_ Text\n\n";
            dd(text).value += "Text `inline code` text [link](http://bing.com) text.\n\n";
            dd(text).value += "![Image Link](http://kirupa.templarian.com/fab.gif)\n\n";
            dd(text).value += "![Image Link](@gif)\n\n";
            dd(text).value += "[![Image Link](http://kirupa.templarian.com/fab.gif)](http://google.com/)\n\n";
            dd(text).value += "[![Image Link](@gif)](@linkGoogle)\n\n";
            dd(text).value += "p. Paragraph [link](http://google.com/) `test *not bold*`\nBreak Line.\n\n";
            dd(text).value += "[Text with variable link](@linkGoogle) useful.\n\n";
            dd(text).value += "p(red). Paragraph author: @author yep @linkGoogle\n\n";
            dd(text).value += "```C# Title\n";
            dd(text).value += "test\n";
            dd(text).value += "```\n\n";
            dd(text).value += "{{{\nCode Block\nMore Code\n}}}\n\n";
            dd(text).value += "{{{{C#} Title\nCode Block\n}}}\n\n";
            var button = dd(editor).addElement("input", {value:"Convert", type:"button"});
            var content = dd(dd.body).addElement("div", {"class":"content"});
            dd(button).event({
                click:function()
                {
                    dd(this.content).empty();
                    var v = dd(this.text).value;
                    dd(this.content).savvy({
                        text:v,
                        override:function()
                        {
                            switch(this.element)
                            {
                                case "paragraph":
                                    return function()
                                    {
                                        dd(this).addElement("p", this.text, this.attribute);
                                    };
                                    break;
                                default:
                                    return null;
                            }
                        },
                        failure:function()
                        {
                            alert(this.error);
                        }
                    });
                }
            }, {text:text, content:content});
            dd(text).event({
                keyup:function()
                {
                    dd(this.button).trigger("click");
                }
            }, {button:button});
        }
    });
    </script>
    <style type="text/css">
    * {padding:0;margin:0;}
    html, body {
        font-family:'Segoe UI','Lucida Grande','Trebuchet MS',Arial;
        height:100%;
        overflow:hidden;
    }
    textarea {
        font-family:Consolas;
        width:500px;
        height:400px;
        border:1px solid #DDD;
        resize:none;
    }
    input {
        border:1px solid #666;
        width:500px;
    }
    .editor {
        width:510px;
        float:left;
        background:#F1F1F1;
        height:100%;
        padding:6px 2px 4px 8px;
        border-right:1px solid #DDD;
    }
    .content {
        margin-left:530px;
        height:100%;
        overflow-y:scroll;
    }
    .content h1 {
        padding:10px;
        font-weight:normal;
        font-size:28px;
    }
    .content .code-title {
        background:#F1F1F1;
        margin:6px 10px 0 0;
        padding:2px 9px;
        border-right:1px solid #222;
        border-left:1px solid #222;
        border-top:1px solid #333;
    }
    .content .code-has-title {
        margin-top:0;
    }
    .content pre {
        color:#FFF;
        background:#222;
        margin-bottom:10px;
        padding:10px;
        margin-right:10px;
        margin-top:10px;
    }
    .content p {
        padding:6px 10px;
    }
    .content .red {
        color:red;
    }
    .content .savvy-error {
        background-color:red;
    }
    </style>
</head>
<body>
    Loading...
</body>
</html>
